<template>
  <div :style="'width:' + width">
    <el-form :label-width="labelWidth" label-position="left" :disabled="disabled">
      <el-form-item :label="name" :required="required">
        <div style="display: flex">
          <el-cascader style="flex: 1" :options="areaDatas" v-model="data.areas" @change="areaChange"
            :placeholder="placeholder" clearable :show-all-levels="showAllLevels" :separator="separator" />
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode,
} from 'element-china-area-data'
export default {
  props: ['value', 'disabled', 'props', 'required', 'isBusiness'],
  data: function () {
    return {
      data: {
        areas: [],
        displayName: '',
      },
    }
  },
  computed: {
    type() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'type')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : 'city'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : 'city'
        }
      }
      return 'city'
    },
    areaDatas() {
      switch (this.type) {
        case 'city':
          return provinceAndCityData
        case 'area':
          return regionData
        case 'cityPlus':
          return provinceAndCityDataPlus
        case 'areaPlus':
          return regionDataPlus
      }
    },
    myprops() {
      return this.props ? this.props : []
    },
    labelWidth() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'labelWidth')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '140px'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '140px'
        }
      }
      return '140px'
    },
    width() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'width')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '100%'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '100%'
        }
      }
      return '100%'
    },
    name() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'name')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '地区'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '地区'
        }
      }
      return '地区'
    },
    placeholder() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'placeholder')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '请选择'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '请选择'
        }
      }
      return '请选择'
    },
    showAllLevels() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'showAllLevels')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value == 'true' || val.BFFP_Value == true
            ? true
            : false
        } else {
          return val.FFLP_Value == 'true' || val.FFLP_Value == true
            ? true
            : false
        }
      }
      return true
    },
    separator() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'separator')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '/'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '/'
        }
      }
      return '/'
    },
  },
  methods: {
    areaChange() {
      this.data.displayName = ''
      this.data.areas.forEach((x) => {
        this.data.displayName += CodeToText[x]
      })
      this.$emit('input', JSON.stringify(this.data))
      this.$emit('display', this.data.displayName)
    },
  },
  mounted: function () {
    if (this.value) {
      this.data = JSON.parse(this.value)
    }
  },
}
</script>
<style scoped>
.el-form-item {
  margin: 10px !important;
}
</style>